<template>
  <div class="login">
    <h2>
      <span v-for="word in data.title">{{word}}</span>
    </h2>
    <h3 class="h2Model">ForST,ForDream</h3>
    <div class="animationB">
      <!-- <iframe id="iframe" src="http://www.jq22.com/demo/rebootbg201705120111" frameborder="0"  width="100%">
      </iframe> -->
      
    </div>
    <div class="btnBox">
      <!-- <button v-for="item in data.btnsData" @click="item.click(vue,item.router)">{{item.btnName}}</button> -->
      <button v-for="item in data.btnsData" @click="$store.commit('goto',item.router)">{{item.btnName}}</button>

    </div>
  </div>
</template>

<script>
  // import { Group, Cell } from 'vux'
  import { goto } from '../../assets/js/methods.js'
  import load from '../../assets/imgs/load/load.jpg'
  export default {
    name: '',
    data() {
      return {
        vue: null,
        imgsUrl: {
          load,
        },
        data: {
          title: 'ForST,ForDream',
          num: 5,        //当前显示的字母计数
          btnsData: [
            {
              btnName: '用户',
              router: 'user',
              click: goto
            }, {
              btnName: '游客',
              router: 'vistor',
              click: goto
            }
          ],
          animation:null,
        }
      }
    },
    methods: {
      reset() {
        this.vue=this
        var spansArray = $('.login>h2>span')
        for (var i = 0; i < spansArray.length; i++) {
          $(spansArray[i]).css({
            left: 19 * (i - spansArray.length / 2) - 10
          })
          this.colorChange(spansArray, 'gold', i)
        }
      },
      // 颜色动画
      colorChange(goal, color, i) {
        setTimeout(() => {
          $(goal[i]).css({
            color
          })
        }, i * 80)
        setTimeout(() => {
          $(goal[i]).css({
            color: 'black'
          })
        }, (i + 1) * 120)
      },

      // 按钮动画
      btnAnimation() {
        $('.btnBox').hide()
        setTimeout(() => {
          $('.btnBox').show(600)
        }, 600)
      }
    },
    mounted() {
      this.reset()
      this.data.animation = setInterval(() => {
        this.reset()
      }, 3500)
      this.btnAnimation()

      this.$store.commit('newVue',this)      //将vue实例传入状态管理中心并且保存为vue
    },
    beforeDestroy() {
      clearInterval('a')
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .login {
    height: 100%;
    background-color: black;
  }

  .login>h2 {
    display: inline-block;
    font-size: 55px;
    position: relative;
    top: 100px;
    font-weight: 600;

  }

  .login>h2>span {
    position: absolute;
    transition: 1s;
    text-shadow: 1px 2px 1px red, -1px -2px 1px white, 10px 10px 10px rgba(212, 212, 212, 0.541);
  }

  .login>h2>span:nth-child(1) {
    /* color:red; */
    transform-origin: left;
    transform: rotate(10deg)
  }

  .btnBox {
    position: fixed;
    bottom: 10px;
    width: 100%;
  }

  .btnBox button {
    display: inline-block;
    width: 80px;
    height: 25px;
  }

  .h2Model {
    color: white;
    width: 80%;
    height: 60px;
    position: absolute;
    top: 200px;
    left: 50%;
    background-color: rgba(100, 100, 102, 0.486);
    border-radius: 50%;
    transform: translate(-50%) rotateX(-30deg);

  }

  .animationB {
    position: absolute;
    top: 270px;
    background-color: transparent;
    bottom: 45px;
    left: 0;
    right: 0;
  }
</style>